<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-model-item label="项目档案编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="finalNo">
              <a-input disabled v-model="model.finalNo" placeholder="请输入项目档案编号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectName">
              <a-input disabled v-model="model.projectName" placeholder="请输入项目名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="合同总额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractTotalMoney">
              <a-input v-model="model.contractTotalMoney"  disabled placeholder="请输入合同总额" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="应付款总额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="receivablesPaymentMoney">
              <a-input v-model="model.receivablesPaymentMoney"  disabled   placeholder="请输入应付款总额" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <!--企业微信聊天需求 迭代11 进度字段留着，先不展示-->
          <!-- <a-col :span="6">
            <a-form-model-item label="进度状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractCompleteStatus">
              <a-input disabled  placeholder="请输入进度状态" ></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="6">
            <a-form-model-item label="实付款总额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realCollectionPaymentMoney">
              <a-input  disabled v-model="model.realCollectionPaymentMoney" placeholder="请输入实付款总额" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="扣款总额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deductMoney">
              <a-input disabled   placeholder="请输入实付款总额" v-model="model.deductMoney" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="最近付款日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lastPaymentTime">
              <j-date disabled placeholder="请选择最近付款日期" v-model="model.lastPaymentTime"  style="width: 100%"  />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="48">
          <a-col :span="8">
            <a-card :bordered="false">
              <a-steps direction="vertical" v-model="current" @change="onChange" :style="stepStyle">
                <a-step
                  v-for="item in nodeList"
                  :key="item.id"
                  :title="item.nodeName"
                  :description="item.paymentMoney"
                  :subTitle="item.entryStatus_dictText"
                  :status="item.choose==1? 'process': (item.isFill==1 ? 'finish' :'wait')"  />
              </a-steps>
            </a-card>
          </a-col>
          <a-col :span="16">
            <a-card :title="formTitle" :bordered="false">
              <a-form-model-item label="应付款金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentMoney">
                <a-input-number :disabled="formDisabled" :max="99999999" :min="0"  v-model="formModel.paymentMoney" placeholder="请输入应付款金额" style="width: 100%" />
              </a-form-model-item>
              <a-form-model-item label="预估款项日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="preCollectionDate">
                <j-date :disabled="formDisabled" placeholder="请选择预估款项日期" v-model="formModel.preCollectionDate" :show-time="true"
                        date-format="YYYY-MM-DD" style="width: 100%" />
              </a-form-model-item>
              <a-form-model-item label="款项节点说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentDesc">
                  <a-textarea :disabled="formDisabled" :max-length="500" v-model="formModel.nodeDesc" rows="4" placeholder="该笔款项为第一次进度款"/>
              </a-form-model-item>
              <!-- <a-form-model-item label="是否应收" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isCollectionPayment">
                <j-dict-select-tag :disabled="formDisabled" type="radio" v-model="formModel.isCollectionPayment" dictCode="YES_OR_NO" />
              </a-form-model-item> -->
              <a-form-model-item label="是否付款" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="entryStatus">
                <j-dict-select-tag :disabled="formDisabled" type="radio" v-model="formModel.entryStatus" dictCode="project_process_is_payment" />
                <!-- <j-dict-select-tag :disabled="formDisabled" type="radio" v-model="formModel.entryStatus" dictCode="entry_status" /> -->
              </a-form-model-item>
              <!-- <a-form-model-item label="确认应收日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmCollectionPaymentDate">
                <j-date :disabled="formDisabled" placeholder="请选择确认应收日期" v-model="formModel.confirmCollectionPaymentDate" :show-time="true"
                        date-format="YYYY-MM-DD" style="width: 100%" />
              </a-form-model-item>
              <a-form-model-item label="是否到位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="entryStatus">
                <j-dict-select-tag :disabled="formDisabled" type="radio" v-model="formModel.entryStatus" dictCode="entry_status" />
              </a-form-model-item> -->
              <a-form-model-item label="实付款金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realCollectionPaymentMoney">
                <a-input :disabled="formDisabled"   v-model="formModel.realCollectionPaymentMoney" placeholder="请输入实付款金额" style="width: 100%" />
              </a-form-model-item>
              <a-form-model-item label="扣款金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deductMoney">
                <a-input :disabled="formDisabled"   v-model="formModel.deductMoney" placeholder="请输入扣款金额" style="width: 100%" />
              </a-form-model-item>
            </a-card>
          </a-col>
        </a-row>
        <a-row :gutter="48">
          <a-col :span="24">
            <div style="margin: 10px 0;font-size: 20px;font-weight: bold;text-align:center;">关联单据</div>
              <a-table style="padding-bottom: 20px;" ref="table" size="middle" rowKey="id" :loading="loading" :columns="columns" :pagination="false"
                :dataSource="dataSource">
                <a slot="billDetail" slot-scope="text, record" @click="onDetail(record)">{{ text }}</a>
              </a-table>
          </a-col>
        </a-row>
      </a-form-model>
      <ErpFinancePaymentBillPenetrate ref="paymentBillPenetrate"></ErpFinancePaymentBillPenetrate>
      <ErpFinanceProjectProgressBillPenetrate ref="projectProgressBill"></ErpFinanceProjectProgressBillPenetrate>
      <ErpFinanceReimbursementPenetrate ref="reimbursementBill"></ErpFinanceReimbursementPenetrate>
    </j-form-container>
  </a-spin>
</template>

<script>
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
import { httpAction, getAction } from '@/api/manage'
import ErpFinancePaymentBillPenetrate from '@/views/scy/penetrate/ErpFinancePaymentBillPenetrate' //付款单
import ErpFinanceProjectProgressBillPenetrate from '@/views/scy/penetrate/ErpFinanceProjectProgressBillPenetrate' //工程进度款支付申请单
import ErpFinanceReimbursementPenetrate from '@/views/scy/penetrate/ErpFinanceReimbursementPenetrate' //费用报销单

  export default {
    name: 'ErpProjectProgressPaymentViewsForm',
    components: {
      ErpFinancePaymentBillPenetrate,
      ErpFinanceProjectProgressBillPenetrate,
      ErpFinanceReimbursementPenetrate
    },
    props: {

      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        stepStyle: {
          marginBottom: '60px',
          boxShadow: '0px -1px 0 0 #e8e8e8 inset',
        },
        dictOptions: {},
        formTitle: '',
        current: 0,
        nodeList: [],
        model:{},
        formModel: {},
        labelCol: {},
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          list: '/api/erp/progress/erpProgressPaymentNode/queryPaymentNodeListByContractId',
          queryListByMainId: '/api/erp/progress/erpProgressPaymentNodeFk/queryListByContractId'
        },
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '单据编号',
            align: 'center',
            dataIndex: 'billNo',
            scopedSlots: { customRender: 'billDetail' },
          },
          {
            title: '收款方名称',
            align: 'center',
            dataIndex: 'payeeUnit_dictText'
          },
          {
            title: '汇款日期',
            align: 'center',
            dataIndex: 'remittanceDate'
          },
          {
            title: '汇款单位',
            align: 'center',
            dataIndex: 'erpOmcCustomerManager_dictText'
          },
          {
            title: '收款账户',
            align: 'center',
            dataIndex: 'payeeAccountNo',
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['payeeAccountNo'], text + '')
              }
            }
          },
          {
            title: '汇款金额（元）',
            align: 'center',
            dataIndex: 'remittanceAmount'
          },
          {
            title: '扣款金额（元）',
            align: 'center',
            dataIndex: 'deductMoney'
          },
          {
            title: '单据类型',
            align: 'center',
            dataIndex: 'payBillType_dictText'
          }
        ],
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.initDictConfig();
    },
    methods: {
      initDictConfig() {
        //todo  收款单回显
        initDictOptions('sys_depart_bank_info,bank_card_no,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'payeeAccountNo', res.result)
          }
        })
      },
      //穿透
      onDetail(record){
        let payBillType = record.payBillType;
        if (payBillType === '1'){
          //付款单
          this.$refs.paymentBillPenetrate.initData(record.paymentBillId);
          this.$refs.paymentBillPenetrate.visible = true;
        }else if(payBillType === '2') {
          //费用报销单
          this.$refs.reimbursementBill.initData(record.paymentBillId);
          this.$refs.reimbursementBill.visible = true;
        }else if (payBillType === '3'){
          //工程进度款支付申请单
          this.$refs.projectProgressBill.initData(record.paymentBillId);
          this.$refs.projectProgressBill.visible = true;
        }
      },
      onChange(current) {
        this.nodeList[current].choose='1'
        this.formModel = this.nodeList[current]
        for (var i = 0 ; i<this.nodeList.length;i++){
          if (i!=current){
            this.nodeList[i].choose='0'
          }
        }
        this.formTitle = this.nodeList[current].nodeName
        this.current = current;
      },
      edit (record) {
        console.log("代入的数据",record)
        this.model = Object.assign({}, record);
        // 查看节点列表
        this.formModel = {}
        this.formTitle = ''
        if (this.model.contractId) {
          getAction(this.url.list, { contractId: this.model.contractId }).then((res) => {
            if (res.success) {
              this.nodeList = res.result || []
              if(this.nodeList.length > 0){
                this.nodeList.forEach(val => {
                  val.choose = 0
                });
                this.formTitle = this.nodeList[0].nodeName
                this.nodeList[0].choose = '1'
                this.formModel = this.nodeList[0]
                this.dataSource = []
                this.changeDataSource(this.model.contractId)
              }
            }
          })
        }
        this.visible = true;
      },
      changeDataSource(val) {
        let url = this.url.queryListByMainId;
        let param = {
          id: val
        }
        getAction(url, param).then((res) => {
          if (res.success) {
            if (!Array.isArray(res.result)) {
              this.dataSource.push(res.result);
            } else {
              for (let i = 0; i < res.result.length; i++) {
                this.dataSource.push(res.result[i]);
              }
            }
          } else {
            this.dataSource = []
          }
        });
      }
    }
  }
</script>
<style>
.ant-steps ant-steps-vertical{
  margin-bottom: 60px;
}
.bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 10px;
}
</style>